<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.imgArea{
				width: 1800px;
				height: 900px;
				position: absolute;
				top: 0;
				left: 0;
			}
			.drawArea{
				width: 1800px;
				height: 900px;
				position: absolute;
				top: 0;
				left: 0;
			}
			.btn_group{
				width: 100%;
				position: absolute;
				top: 900px;
				left: 0;
			}
		</style>
	</head>
	<body>
		<div class="canvas">
			<canvas class="imgArea" width="1800" height="900"></canvas>
			<canvas class="drawArea" width="1800" height="900"></canvas>
			<img src="" class="saveImage"/>
		</div>
		<div class="btn_group">
			<button class="uploadImg">图片上传</button>
			<button class="drawImg">勾勒区域</button>
			<button class="finishDrawing">完成勾勒</button>
			<button class="clearDraw">清楚勾勒</button>
			<button class="saveImg">保存痕迹</button>
		</div>
		
	</body>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){

			var numList = [];
			var img = new Image();
			var imgArea = document.querySelector('.imgArea').getContext('2d');
			var drawArea = document.querySelector('.drawArea').getContext('2d');
			var saveImgArea = document.querySelector('.imgArea');
			var saveDrawArea = document.querySelector('.drawArea');
			
            
			function line(x,y){		
				var e = event || window.event;
				if(x && y) numList.push({xZuoBiao:x, yZuoBiao:y})
				console.log(numList);
	        	//开始路径
	        	drawArea.beginPath();
				drawArea.width = 1;
	        	var index = numList.length - 1;
	        	if(index > 0) { 
	        		drawArea.moveTo(numList[index - 1].xZuoBiao,numList[index - 1].yZuoBiao);
		        	drawArea.lineTo(numList[index].xZuoBiao,numList[index].yZuoBiao);
	        	}
	        	drawArea.closePath();
	            drawArea.strokeStyle = '#000';
	         	drawArea.stroke();
	         	drawArea.fillStyle = '#f00';
	         	drawArea.fill();
			}	
			//勾勒区域
			$('.drawImg').click(function(){
				$('.canvas').click(function(e){				
					line(e.clientX, e.clientY);
				});
			});
			
			//上传图片
			$('.uploadImg').click(function(){
				document.querySelector('.imgArea').getContext('2d').drawImage(img,0,0);
			});
			img.src = 'img/demo_picture.png';
			
			//完成勾勒
			$('.finishDrawing').click(function(){
				numList.splice(0,numList.length);
			});
			
			//清楚勾勒痕迹
			$('.clearDraw').click(function(){
				drawArea.clearRect(0,0,1800,900);
			});
			
			//保存
			$('.saveImg').click(function(){
				var saveImg = new Image();
				saveImg.src = saveDrawArea.toDataURL("img/png");
				console.log(saveImg.src);
				$('.saveImage').attr('src',saveImg.src);
				return saveImg;
			});
		});
	</script>
</html>
